import React from "react";
import { View, Text } from "@tarojs/components";

import "./index.less";

const Tabs = ({ list, activeId, onChange }) => {
  console.log(list);
  const handleClick = (id) => {
    if (id === activeId) return;
    onChange && onChange(id);
  };
  return (
    <View class="tabs">
      <View class="tabs-header">
        {list.map(({ id, name }) => {
          return (
            <View
              key={id}
              className={`tabs-header-item ${id === activeId ? "active" : ""}`}
              onClick={() => {
                handleClick(id);
              }}
            >
              <Text>{name}</Text>
              <View class="tabs-header-item-border"></View>
            </View>
          );
        })}
      </View>
      <View class="tabs-body">
        {list.map(({ id, children }) => {
          if (id === activeId) {
            return <View key={id}>{children}</View>;
          }
          return null;
        })}
        {/* <View v-for="{ id } in items" :key="id">
          <slot :name="id" v-if="activeId === id"></slot>
        </View> */}
      </View>
    </View>
  );
};

export default Tabs;
